<template>
  <el-form ref="form" :model="form" label-width="150px" :rules="rules">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="pasteGoods">粘贴商品</el-button>
      </el-col>
    </el-row>
    <el-form-item label="商品类型" prop="typeCode">
      <el-select v-model="form.typeCode" placeholder="商品类型选择" clearable class="input-W" disabled>
        <el-option v-for="dict in this.typeList" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="场馆名称" prop="venueId">
      <el-select v-model="form.venueId" placeholder="场馆选择" clearable class="input-W" @change="$forceUpdate()" disabled>
        <el-option v-for=" dict in this.venueList" :key="dict.id" :label="dict.name" :value="dict.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="form.name" class="input-W" placeholder="商品名称" />
    </el-form-item>
    <el-form-item label="归属场馆" prop="artVenues">
      <el-select v-model="form.artVenues" placeholder="兑换商品场馆归属" clearable class="input-W">
        <el-option v-for="dict in this.lotVenueList" :key="dict.id" :label="dict.name" :value="dict.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="商品编号" prop="goodsNo">
      <el-input v-model="form.goodsNo" class="input-W" placeholder="商品编号" />
    </el-form-item>
    <el-form-item label="成本价格(元)" sortable prop="costPrice">
      <el-input v-model="form.costPrice" class="input-W" placeholder="请输入成本价格" />
    </el-form-item>
    <el-form-item label="现金价格(元)" sortable prop="cashPrice">
      <el-input v-model="form.cashPrice" class="input-W" placeholder="请输入现金价格" />
    </el-form-item>
    <el-form-item label="金积分价格" sortable prop="goldPrice">
      <el-input v-model="form.goldPrice" class="input-W" disabled />
    </el-form-item>
    <el-form-item label="银积分价格" sortable prop="silverPrice">
      <el-input v-model="form.silverPrice" class="input-W" disabled />
    </el-form-item>
    <el-form-item label="止售次数" sortable prop="resellNum">
      <el-input-number v-model="form.resellNum" controls-position="right" :min="1" />
    </el-form-item>

    <el-form-item label="是否上架" prop="isPutaway">
      <el-select v-model="form.isPutaway" placeholder="上架状态" clearable class="input-W" @change="$forceUpdate()">
        <el-option v-for="dict in this.dict.type.goods_putaway_status" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="排序" sortable prop="orderNum">
      <el-input-number v-model="form.orderNum" controls-position="right" :min="1" />
    </el-form-item>
    <!-- <el-form-item label="缩略图" prop="imgMin">
      <image-upload :valueData="form.imgMin" params="imgMin" @uploaded="uploaded"></image-upload>
    </el-form-item> -->
    <el-form-item label="大图" prop="minList">
      <image-upload :valueData="form.minList" params="minList" @uploaded="uploaded"></image-upload>
    </el-form-item>
    <el-form-item label="商品详情" prop="details">
      <editor :value="form.details" :height="400" ref="editor"></editor>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  props: ['venueList', 'goodsPayTypeEnum', 'formData', 'lotVenueList'],
  dicts: ['goods_putaway_status'],
  data() {
    const validtext = (rule, value, callback) => {
      let textValue = this.$refs.editor.currentValue;
      if (!textValue) {
        callback(new Error('请输入详情内容'))
      } else {
        callback()
      }
    };
    const imgValidtext = (rule, value, callback) => {
      let textValue = this.form.minList;
      if (textValue && textValue[1] != ']') {
        callback()
      } else {
        callback(new Error('请上传大图'))
      }
    }
    return {
      typeList: [
        { label: "竞价品", value: 1 },
        { label: "兑换商品", value: 4 },
      ],

      selectVenueList: [],
      form: this.formData,
      rules: {
        typeCode: [{ required: true, message: "商品类型必填", trigger: "blur" }],
        venueId: [{ required: true, message: "场馆名称必填", trigger: "blur" }],
        name: [{ required: true, message: "商品名称必填", trigger: "blur" }],
        goodsNo: [{ required: true, message: "商品编号必填", trigger: "blur" }],
        cashPrice: [{ required: true, message: "现金价必填", trigger: "blur" }], //现金价
        costPrice: [{ required: true, message: "成本价格必填", trigger: "blur" }], //成本价格
        goldPrice: [{ required: true, message: "金积分必填", trigger: "blur" }], //金积分
        silverPrice: [{ required: true, message: "银积分必填", trigger: "blur" }],//银积分
        isPutaway: [{ required: true, message: "必选", trigger: "blur" }],
        artVenues: [{ required: true, message: "场馆归属必填", trigger: "blur" }],//场馆归属
        resellNum: [{ required: true, message: "止售次数必填", trigger: "blur" }], //止售次数
        // imgMin: [{ required: true, message: "必填", trigger: "blur" }],
        minList: [{ required: true, message: "请选择大图", trigger: ["blur", "change"], validator: imgValidtext }],
        details: [{ required: true, trigger: ["blur", "change"], validator: validtext }],
      }

    }
  },
  mounted() {
    if (!this.form.id) {
      this.form.typeCode = 4;
      this.form.goldPrice = 0;
      this.form.silverPrice = 0;
      this.form.venueId = 2;
      this.form.isPutaway = '0';
    }
    // this.scrollToTop();
  },

  watch: {
    "form.cashPrice": {
      deep: true,
      handler: function (newV, oldV) {
        if (newV) {
          this.form.goldPrice = parseInt(this.form.cashPrice) / 2 || 0;
          this.form.silverPrice = parseInt(this.form.cashPrice) / 2 || 0;
        }
      },
    },
    formData: function (val) {
      this.form = val;
    }
  },
  methods: {
    uploaded(params, dict) {
      this.form[params] = JSON.stringify(dict);
    },

    //粘贴商品
    pasteGoods() {
      let copyGoods = JSON.parse(JSON.stringify(this.$store.state.goods.copyGoodsDict));
      if (copyGoods) {
        this.form = copyGoods;

        this.form.typeCode = 4;
        this.form.goldPrice = 0;
        this.form.silverPrice = 0;
        this.form.venueId = 2;
        this.form.isPutaway = '0';

      }
    },

    scrollToTop() {
      this.$nextTick(() => {
        this.$refs.formBox.scrollTo(0, 0);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog-div {
  height: 60vh;
  overflow: auto;
}
.input-W {
  width: 100%;
}
</style>